<template>
  <view
    class="pro-form"
    :style="{ 
      padding: padding + 'rpx',
      backgroundColor: backgroundColor
    }"
  >
    <view
      v-for="(item, index) in formConfig" 
      :key="index"
      v-show="!item.hidden"
      class="form-item"
      :class="{ 'first-child': index === 0 ,'last-child': index === formConfig.length - 1}"
    >
      <view class="form-item-content" :class="{ horizontal: layout === 'horizontal' }">
        <text class="form-label" :style="{ color: labelColor }" :class="{ required: item.required,inRequired:!item.required }">
          {{ item.label }}
        </text>
        <view class="form-input-wrapper">
          <!-- Input Field -->
          <template v-if="item.type === 'input'">
            <view class="input-container">
              <input
                :disabled="item.disabled"
                :value="formData[item.field]"
                :type="item.inputType || 'text'"
                :placeholder="item.placeholder"
                :maxlength="item.maxLength || -1"
                class="form-input"
                @input="handleInputChange(item.field, $event)"
              >
              <text 
                v-if="formData[item.field] && item.showClear" 
                class="clear-icon" 
                @click="clearField(item.field)"
              >
                ×
              </text>
            </view>
          </template>

  
          <!-- Selector -->
          <template v-if="item.type === 'select'">
            <view class="input-container">
              <picker
                :disabled="item.disabled"
                :value="formData[item.field]"
                :range="item.options"
                :range-key="item.rangeKey || 'label'"
                class="form-picker"
                @change="handleSelectChange(item.field, $event)"
              >
                <view
                  class="picker-value"
                  :style="{ 
                    color: formData[item.field] ? '#333' : '#888888',
                    fontWeight: formData[item.field] ? 'normal' : '400'
                  }"
                >
                  {{ getSelectedLabel(item, formData[item.field]) || item.placeholder }}
                </view>
              </picker>
              <text 
                v-if="formData[item.field] && item.showClear" 
                class="clear-icon" 
                @click="clearField(item.field)"
              >
                ×
              </text>
              <view class="right-arrow-box">
                <image v-show="!item.iconHidden" class="right-arrow" src="./assets/right-arrow.png" />
              </view>
            </view>
          </template>
  
          <!-- 添加时间选择器 -->
          <template v-if="item.type === 'datetime'">
            <view class="input-container">
              <picker
                mode="multiSelector"
                :disabled="item.disabled"
                :value="getDateTimeValue(item.field)"
                :range="item.ranges"
                class="form-picker"
                :data-field="item.field"
                :data-format="item.format || 'yyyy-MM-dd'"
                @change="handleDateTimeChange(item.field, $event)"
                @columnchange="handleDateTimeColumnChange"
              >
                <view
                  class="picker-value"
                  :style="{ 
                    color: formData[item.field] ? '#333' : '#888888',
                    fontWeight: formData[item.field] ? 'normal' : '400'
                  }"
                >
                  {{ formData[item.field] || item.placeholder }}
                </view>
              </picker>
              <text 
                v-if="formData[item.field] && item.showClear" 
                class="clear-icon" 
                @click="clearField(item.field)"
              >
                ×
              </text>
              <view class="right-arrow-box">
                <image v-show="!item.iconHidden" class="right-arrow" src="./assets/right-arrow.png" />
              </view>
            </view>
          </template>
  
          <!-- Error Message -->
        </view>
      </view>
      <view class="error-container" v-if="errors[item.field]">
        <text class="error-message">
          {{ errors[item.field] }}
        </text>
      </view>
      <view class="tip" v-if="item.tip&&item.tip.length>0">
        {{ item.tip }}
      </view>
    </view>
  
    <!-- Submit Button -->
    <view class="footer-container" v-show="footerShow">
      <slot name="footer">
        <button class="submit-button" :disabled="loading" @click="handleSubmit">
          {{ submitText }}
        </button>
      </slot>
    </view>
  </view>
</template>
  
  <script setup>
  import { ref, reactive, onMounted, defineProps, defineEmits, defineExpose, watch, nextTick } from 'vue'
  import { formatDateForIOS } from '../../utils/validate'
  
  const props = defineProps({
    // 表单配置项
    formConfig: {
      type: Array,
      required: true,
      default: () => ([{
        label: '姓名',
        field: 'name',
        type: 'input',
        required: true,
        placeholder: '请输入姓名',
        showClear: false,
        showCurrentTimeOnOpen: Boolean,
      }, {
        label: '年龄',
        field: 'age',
        type: 'input',
        required: true,
        placeholder: '请输入年龄',
        showClear: false
      }, {
        label: '性别',
        field: 'sex',
        type: 'select',
        required: true,
        placeholder: '请选择性别',
        showClear: false,
        options: [{
          label: '男',
          value: 'male'
        }, {
          label: '女',
          value: 'female'
        }]
      }, {
        label: '时间',
        field: 'time',
        type: 'datetime',
        required: true,
        placeholder: '请选择时间',
        showClear: true,
        tip: '时间提示',
        minDateTime: '', // 最小可选时间，格式：YYYY-MM-DD HH:mm:ss
        maxDateTime: '' // 最大可选时间，格式：YYYY-MM-DD HH:mm:ss
      }])
    },
    modelValue: {
      type: Object,
      default: () => ({})
    },
    // 提交按钮文字
    submitText: {
      type: String,
      default: '提交'
    },
    // 布局方式：vertical 或 horizontal
    layout: {
      type: String,
      default: 'horizontal',
      validator: (value) => ['vertical', 'horizontal'].includes(value)
    },
    padding: {
      type: [Number, String],
      default: 0
    },
    // 标签文字颜色
    labelColor: {
      type: String,
      default: '#666666'
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: '#ffffff'
    },
    footerShow: {
      type: Boolean,
      default: false
    }
  })
  
  const emit = defineEmits(['change', 'submit', 'update:modelValue', 'initForm'])
  
  const formData = reactive({})
  const errors = reactive({})
  const loading = ref(false)
  
  // 在 script setup 顶部添加日期时间相关的响应式数据
  const dateTimeRange = reactive([[], [], [], [], [], []])
  
  // 监听modelValue的变化
  watch(() => props.modelValue, (newVal) => {
    Object.assign(formData, newVal)
  }, { deep: true })
  
  // 初始化表单数据
  const initFormData = () => {
    // 先初始化配置中的默认值
    props.formConfig.forEach(item => {
      if (item.defaultValue !== undefined && !(item.field in formData)) {
        formData[item.field] = item.defaultValue
      }
    })
    // 再用modelValue覆盖默认值
    Object.assign(formData, props.modelValue)
    // 处理未设置的字段
    props.formConfig.forEach(item => {
      if (!(item.field in formData)) {
        formData[item.field] = ''
      }
      // 如果是datetime类型，初始化ranges
      if (item.type === 'datetime') {
        item.ranges = getDateTimeRanges(item)
      }
    })
  }
  
  const handleInputChange = (field, event) => {
    const value = event.detail.value
    formData[field] = value
    validateField(field)
    emit('update:modelValue', { ...formData })
    emit('change', { field, value, formData })
  }
  
  const handleSelectChange = (field, event) => {
    const value = event.detail.value
    const item = props.formConfig.find(item => item.field === field)
    formData[field] = item.options[value].value
    validateField(field)
    emit('update:modelValue', { ...formData })
    emit('change', { field, value: formData[field], formData })
  }
  
  const handleDateChange = (field, event) => {
    const value = event.detail.value
    formData[field] = value
    validateField(field)
    emit('update:modelValue', { ...formData })
    emit('change', { field, value, formData })
  }
  
  const getSelectedLabel = (item, value) => {
    if (!item.options || !value) return ''
    const selected = item.options.find(option => option.value === value)
    return selected ? selected.label : ''
  }
  
  // 验证日期时间是否在范围内
  const isDateTimeInRange = (dateTimeStr, field) => {
    const item = props.formConfig.find(item => item.field === field)
    if (!item || !dateTimeStr) return true

    const currentDate = new Date(formatDateForIOS(dateTimeStr))
    if (item.minDateTime) {
      const minDate = new Date(formatDateForIOS(item.minDateTime))
      if (currentDate <= minDate) {
        return false
      }
    }
    
    if (item.maxDateTime) {
      const maxDate = new Date(formatDateForIOS(item.maxDateTime))
      if (currentDate > maxDate) {
        return false
      }
    }
    
    return true
  }
  
  // 修改验证字段函数
  const validateField = (field) => {
    const config = props.formConfig.find(item => item.field === field)
    if (!config) return true
  
    let isValid = true
    let errorMessage = ''
  
    // Required validation - updated to allow zero values
    if (config.required && formData[field] !== 0 && !formData[field]) {
      isValid = false
      errorMessage = `${config.label}不能为空`
    }
  
    // Custom validation
    if (config.validator && isValid) {
      const validResult = config.validator(formData[field])
      if (validResult !== true) {
        isValid = false
        errorMessage = validResult
      }
    }
  
    if (!isValid) {
      errors[field] = errorMessage
    } else {
      delete errors[field]
    }
  
    return isValid
  }
  
  const validate = () => {
    let isValid = true
    const validateResults = {}
    
    props.formConfig.forEach(item => {
      if (!validateField(item.field)) {
        isValid = false
        validateResults[item.field] = errors[item.field]
      }
    })
    
    return {
      valid: isValid,
      errors: validateResults
    }
  }
  
  const handleSubmit = async () => {
    if (!validate()) {
      return
    }
  
    loading.value = true
    try {
      emit('submit', formData)
    } finally {
      loading.value = false
    }
  }
  
  // 清空字段
  const clearField = (field) => {
    formData[field] = ''
    validateField(field)
    emit('update:modelValue', { ...formData })
    emit('change', { field, value: '', formData })
  }
  
  // 初始化日期时间范围
  const initDateTimeRange = () => {
    const dateTimeFields = props.formConfig.filter(item => item.type === 'datetime')
    
    dateTimeFields.forEach(item => {
      const ranges = getDateTimeRanges(item)
      item.ranges = ranges
    })
  }

  // 获取日期时间范围
  const getDateTimeRanges = (item) => {
    // 默认范围 - 完整范围
    let minYear = 2020
    let maxYear = 2050
    let minMonth = 1
    let maxMonth = 12
    let minDay = 1
    let maxDay = 31
    let minHour = 0
    let maxHour = 23
    let minMinute = 0
    let maxMinute = 59
    let minSecond = 0
    let maxSecond = 59
    
    // 只有设置了最小时间时才应用限制
    if (item.minDateTime) {
      const minDate = item.minDateTime === 'currentDate' ? new Date() : new Date(formatDateForIOS(item.minDateTime))
      minYear = minDate.getFullYear()
      minMonth = minDate.getMonth() + 1
      minDay = 1 // 默认从1号开始，只有在初始化时的最小年月才使用minDate的日期
      minHour = minDate.getHours()
      minMinute = minDate.getMinutes()
      minSecond = minDate.getSeconds()
    }

    // 只有设置了最大时间时才应用限制
    if (item.maxDateTime) {
      const maxDate = item.maxDateTime === 'currentDate' ? new Date() : new Date(formatDateForIOS(item.maxDateTime))
      maxYear = maxDate.getFullYear()
      maxMonth = maxDate.getMonth() + 1
      maxDay = maxDate.getDate()
      maxHour = maxDate.getHours()
      maxMinute = maxDate.getMinutes()
      maxSecond = maxDate.getSeconds()
    }
    
    const format = item.format || 'yyyy-MM-dd'
    const ranges = [
      // 年份范围
      Array.from(
        { length: maxYear - minYear + 1 }, 
        (_, i) => String(minYear + i)
      ),
      // 月份范围
      Array.from(
        { length: maxMonth - minMonth + 1 }, 
        (_, i) => String(minMonth + i).padStart(2, '0')
      ),
      // 天数范围
      Array.from(
        { length: maxDay - minDay + 1 }, 
        (_, i) => String(minDay + i).padStart(2, '0')
      )
    ]

    // 如果格式包含时间，添加时间相关的范围
    if (format === 'yyyy-MM-dd HH:mm:ss') {
      ranges.push(
        // 小时范围
        Array.from(
          { length: maxHour - minHour + 1 }, 
          (_, i) => String(minHour + i).padStart(2, '0')
        ),
        // 分钟范围
        Array.from(
          { length: maxMinute - minMinute + 1 }, 
          (_, i) => String(minMinute + i).padStart(2, '0')
        ),
        // 秒范围
        Array.from(
          { length: maxSecond - minSecond + 1 }, 
          (_, i) => String(minSecond + i).padStart(2, '0')
        )
      )
    }
    
    return ranges
  }

  // 更新天数
  const updateDays = (field, year, month) => {
    const item = props.formConfig.find(item => item.field === field && item.type === 'datetime')
    if (!item) return
    
    let minDay = 1
    let maxDay = new Date(formatDateForIOS(`${year}/${month}/1`)).getMonth() === month - 1 ? 
      new Date(year, month, 0).getDate() : 31
    
    // 只有在最小年份和最小月份时才限制最小天数
    if (item.minDateTime) {
      const minDate = item.minDateTime === 'currentDate' ? new Date() : new Date(formatDateForIOS(item.minDateTime))
      const minYear = minDate.getFullYear()
      const minMonth = minDate.getMonth() + 1
      
      // 只在年月都匹配且是初始化的最小年月时才应用最小天数限制
      if (year === minYear && month === minMonth && item.ranges && 
        item.ranges[0].indexOf(String(year)) === 0 && 
        item.ranges[1].indexOf(String(month).padStart(2, '0')) === 0) {
        minDay = minDate.getDate()
      }
    }
    
    // 只有设置了最大时间且年月匹配时才限制最大天数
    if (item.maxDateTime) {
      const maxDate = item.maxDateTime === 'currentDate' ? new Date() : new Date(formatDateForIOS(item.maxDateTime))
      if (year === maxDate.getFullYear() && month === maxDate.getMonth() + 1) {
        maxDay = maxDate.getDate()
      }
    }

    item.ranges[2] = Array.from(
      { length: maxDay - minDay + 1 }, 
      (_, i) => String(minDay + i).padStart(2, '0')
    )
  }

  // 获取日期时间当前值的索引数组
  const getDateTimeValue = (field) => {
    const item = props.formConfig.find(item => item.field === field && item.type === 'datetime')
    if (!item || !item.ranges) return [0, 0, 0]
    
    const format = item.format || 'yyyy-MM-dd'
    if (!formData[field]) {
      // 如果配置了 showCurrentTimeOnOpen 且为 true，则显示当前时间
      if (item.showCurrentTimeOnOpen) {
        const today = new Date()
        let year = today.getFullYear()
        let month = today.getMonth() + 1
        let day = today.getDate()
        let hours = today.getHours()
        let minutes = today.getMinutes()
        let seconds = today.getSeconds()

        // 如果当前时间小于最小时间，则使用最小时间
        if (item.minDateTime) {
          const minDateLimit = new Date(formatDateForIOS(item.minDateTime))
          if (today < minDateLimit) {
            year = minDateLimit.getFullYear()
            month = minDateLimit.getMonth() + 1
            day = minDateLimit.getDate()
            hours = minDateLimit.getHours()
            minutes = minDateLimit.getMinutes()
            seconds = minDateLimit.getSeconds()
          }
        }

        // 如果当前时间大于最大时间，则使用最大时间
        if (item.maxDateTime) {
          const maxDateLimit = new Date(formatDateForIOS(item.maxDateTime))
          if (today > maxDateLimit) {
            year = maxDateLimit.getFullYear()
            month = maxDateLimit.getMonth() + 1
            day = maxDateLimit.getDate()
            hours = maxDateLimit.getHours()
            minutes = maxDateLimit.getMinutes()
            seconds = maxDateLimit.getSeconds()
          }
        }

        const yearStr = year.toString()
        const monthStr = month.toString().padStart(2, '0')
        const dayStr = day.toString().padStart(2, '0')
        const hoursStr = hours.toString().padStart(2, '0')
        const minutesStr = minutes.toString().padStart(2, '0')
        const secondsStr = seconds.toString().padStart(2, '0')

        if (format === 'yyyy-MM-dd HH:mm:ss') {
          return [
            item.ranges[0].indexOf(yearStr),
            item.ranges[1].indexOf(monthStr),
            item.ranges[2].indexOf(dayStr),
            item.ranges[3].indexOf(hoursStr),
            item.ranges[4].indexOf(minutesStr),
            item.ranges[5].indexOf(secondsStr)
          ].map(index => index === -1 ? 0 : index)
        }
        
        return [
          item.ranges[0].indexOf(yearStr),
          item.ranges[1].indexOf(monthStr),
          item.ranges[2].indexOf(dayStr)
        ].map(index => index === -1 ? 0 : index)
      }

      // 如果没有配置 showCurrentTimeOnOpen 或为 false，则使用最小时间（如果有）或范围内第一个值
      if (item.minDateTime) {
        const minDate = new Date(formatDateForIOS(item.minDateTime))
        const yearStr = minDate.getFullYear().toString()
        const monthStr = (minDate.getMonth() + 1).toString().padStart(2, '0')
        const dayStr = minDate.getDate().toString().padStart(2, '0')
        const hoursStr = minDate.getHours().toString().padStart(2, '0')
        const minutesStr = minDate.getMinutes().toString().padStart(2, '0')
        const secondsStr = minDate.getSeconds().toString().padStart(2, '0')

        if (format === 'yyyy-MM-dd HH:mm:ss') {
          return [
            item.ranges[0].indexOf(yearStr),
            item.ranges[1].indexOf(monthStr),
            item.ranges[2].indexOf(dayStr),
            item.ranges[3].indexOf(hoursStr),
            item.ranges[4].indexOf(minutesStr),
            item.ranges[5].indexOf(secondsStr)
          ].map(index => index === -1 ? 0 : index)
        }
        
        return [
          item.ranges[0].indexOf(yearStr),
          item.ranges[1].indexOf(monthStr),
          item.ranges[2].indexOf(dayStr)
        ].map(index => index === -1 ? 0 : index)
      }

      // 如果没有最小时间限制，则使用范围内第一个值
      if (format === 'yyyy-MM-dd HH:mm:ss') {
        return [0, 0, 0, 0, 0, 0]
      }
      return [0, 0, 0]
    }
    
    // 已有值的处理逻辑保持不变
    let dateValues = []
    if (format === 'yyyy-MM-dd HH:mm:ss') {
      const dateTimeParts = formData[field].split(' ')
      const dateParts = dateTimeParts[0].split('-')
      const timeParts = dateTimeParts[1].split(':')
      
      dateValues = [
        item.ranges[0].indexOf(dateParts[0]),
        item.ranges[1].indexOf(dateParts[1]),
        item.ranges[2].indexOf(dateParts[2]),
        item.ranges[3].indexOf(timeParts[0]),
        item.ranges[4].indexOf(timeParts[1]),
        item.ranges[5].indexOf(timeParts[2] || '00')
      ]
    } else {
      const [year, month, day] = formData[field].split('-')
      dateValues = [
        item.ranges[0].indexOf(year),
        item.ranges[1].indexOf(month),
        item.ranges[2].indexOf(day)
      ]
    }
    
    return dateValues.map(index => index === -1 ? 0 : index)
  }

  // 处理日期时间选择
  const handleDateTimeChange = (field, event) => {
    const item = props.formConfig.find(item => item.field === field && item.type === 'datetime')
    if (!item || !item.ranges) return
    
    const indexes = event.detail.value
    const format = item.format || 'yyyy-MM-dd' // 默认格式为日期
    
    let selectedDateTime = ''
    if (format === 'yyyy-MM-dd HH:mm:ss') {
      selectedDateTime = `${item.ranges[0][indexes[0]]}-${item.ranges[1][indexes[1]]}-${item.ranges[2][indexes[2]]} ${item.ranges[3][indexes[3]]}:${item.ranges[4][indexes[4]]}:${item.ranges[5][indexes[5]]}`
    } else {
      selectedDateTime = `${item.ranges[0][indexes[0]]}-${item.ranges[1][indexes[1]]}-${item.ranges[2][indexes[2]]}`
    }
    
    formData[field] = selectedDateTime
    validateField(field)
    emit('update:modelValue', { ...formData })
    emit('change', { field, value: selectedDateTime, formData })
  }

  // 处理列变化
  const handleDateTimeColumnChange = (e) => {
    const { column, value } = e.detail
    const field = e.currentTarget.dataset.field
    if (!field) return
    
    // 当年或月变化时，更新天数
    if (column === 0 || column === 1) {
      const yearIndex = column === 0 ? value : getDateTimeValue(field)[0]
      const monthIndex = column === 1 ? value : getDateTimeValue(field)[1]
      
      const item = props.formConfig.find(item => item.field === field && item.type === 'datetime')
      if (!item || !item.ranges) return
      
      const year = item.ranges[0][yearIndex]
      const month = item.ranges[1][monthIndex]
      updateDays(field, Number(year), Number(month))
    }
  }
  
  onMounted(() => {
    initFormData()
    // 在下一个tick触发initForm事件，确保父组件的数据都准备好了
    nextTick(() => {
      emit('initForm', formData)
    })
  })

  // 暴露方法给外部使用
  defineExpose({
    validate,
    formData,
    errors
  })
  </script>
  
  <style lang="scss" scoped>
  @import '../base.scss';
  .pro-form {
    .form-item {
      width: 100%;
      border-bottom: 1px solid #eee;
      padding:28rpx 0;
      &.last-child{
        border-bottom: none;
        margin-bottom: 0;
      }
      // &:first-child {
      //   border-bottom: none !important;
      // }

      // &:last-child {
      //   margin-bottom: 0;
      //   border-bottom: none !important;
      // }
      

      .form-item-content {
        min-height: 48rpx;
        display: flex;
        align-items: center;
        
        &.horizontal {
          display: flex;
          flex-direction: row;
          align-items: center;
          
          .form-label {
            min-width: 90px;
            flex-shrink: 0;
            margin-bottom: 0;
            margin-right: 12px;
            padding-top: 0;
          }
          
          .form-input-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
          
            
          }
        }

        
      }
      .error-container {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          .error-message {
              margin-top: 4px;
            }
        }
      .tip{
        font-weight: 400;
        text-align: right;
        margin-bottom: 10rpx;
        color: $warning-color;
      }
    }
    .form-item:last-child {
      border-bottom: none;
    }
    .form-label {
      display: block;
      font-size: 28rpx;
      margin-bottom: 8rpx;
  
      &.required::before {
        content: '*';
        color: #ff4d4f;
        margin-right: 4rpx;
      }
      &.inRequired {
        padding-left: 20rpx;
      }
    }
  
    .form-input {
      width: 100%;
      box-sizing: border-box;
      height: 40rpx;
      padding: 0 12rpx;
      border: 2rpx solid #dcdfe6;
      border-radius: 4rpx;
      font-size: 28rpx;
      color: #333;
      background-color: #fff;
      text-align: left;

      &::placeholder {
        color: #888888;
        font-weight: 400;
      }
    }
  
    .form-picker {
      .picker-value {
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 12rpx;
        border: 2rpx solid #dcdfe6;
        border-radius: 4rpx;
        font-size: 28rpx;
        color: #333;
        background-color: #fff;
        text-align: left;
  
        &:empty::before {
          content: attr(placeholder);
          color: #888888;
          font-weight: 400;
        }
      }
    }
  
    .error-message {
      font-size: 28rpx;
      color: #ff4d4f;
      margin-top: 4rpx;
    }
  
    .submit-button {
      width: 100%;
      height: 44rpx;
      margin-top: 24rpx;
      background-color: #2979ff;
      color: #fff;
      border-radius: 4rpx;
      font-size: 28rpx;
      border: none;
  
      &:disabled {
        opacity: 0.6;
      }
    }
  
    .input-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      .clear-icon {
        position: absolute;
        right: 12rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 16rpx;
        height: 16rpx;
        line-height: 16rpx;
        text-align: center;
        border-radius: 50%;
        background-color: #ccc;
        color: #fff;
        font-size: 28rpx;
        cursor: pointer;
        z-index: 1;
  
        &:hover {
          background-color: #999;
        }
      }
    }
  
    .form-input {
      padding-right: 37rpx;
      border: none;
      background: transparent;
    }
  
    .form-picker {
      .picker-value {
        padding-right: 6rpx;
        border: none;
        background: transparent;
      }
    }
  
    .horizontal {
      .form-input,
      .picker-value {
        text-align: right;
      }
    }
  }
  
  .picker-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10rpx;
  }
  .right-arrow-box{
    width: 32rpx;
    height: 32rpx;
  }
  .right-arrow {
    width: 32rpx;
    height: 32rpx;
  }
  </style> 